// 弹窗
(function (window) {
    window.layer = {}

    window.layer.type = {
        'success': {
            color: `#fff`,
            backgroundColor: `#009688`
        },
        'error': {
            color: `#fff`,
            backgroundColor: `#f44336`
        },
        'info': {
            color: `#fff`,
            backgroundColor: `#2196F3`
        }
    }

    function showToast(content, type) {
        let toastList = document.getElementById(`toast-list`)
        if (!toastList) {
            toastList = document.createElement(`div`)
            toastList.id = `toast-list`
            document.body.appendChild(toastList)
            toastList.style = `position: fixed;top: 0px;left: 50%;transform: translateX(-50%);z-index: 1000;width:auto;height:auto`;

        }

        let toastTypeInfo = window.layer.type[type] || window.layer.type['info']

        function addToast() {
            let toast = document.createElement(`div`)
            toast.style.transition = `all 1s linear`
            toast.style.position = `relative`
            toast.style.width = `auto`
            toast.style.height = `auto`
            toast.style.margin = `10px 20px`
            toast.style.padding = `10px 20px`
            toast.style.backgroundColor = toastTypeInfo.backgroundColor
            toast.style.opacity = `1`
            toast.style.borderRadius = `10px`
            toast.style.color = toastTypeInfo.color
            toast.innerHTML = `<div class="toast-content">${content}</div>`
            setTimeout(() => {
                if (toastList.children.length === 0) {
                    toastList.remove()
                    return
                }
                toast.remove()
            }, 1000)
            return toast
        }

        //给toast添加过渡
        toastList.appendChild(addToast())


    }

    function showLoading(msg, time, callback) {
        let loading = document.getElementById(`loading`)
        if (!loading) {
            loading = document.createElement(`div`)
            loading.id = `loading`
            document.body.appendChild(loading)
            loading.style.width = `100vw`
            loading.style.height = `100vh`
            loading.style.zIndex = `1000`
            loading.style.position = `fixed`
            loading.style.top = `0`
            loading.style.left = `0`
            loading.style.backgroundColor = `rgba(0, 0, 0, .5)`
            loading.style.display = `flex`
            loading.style.justifyContent = `center`
            loading.style.alignItems = `center`

            loading.style.flexDirection = `column`
            // loading的旋转动画
            loading.innerHTML = `<div class="loading-content">
                <div class="loading-animate">                    
                </div>
                <span class="loading-text">${msg}</span>
                </div>`
        }

        let timer = null

        function closeLoading() {
            loading.remove()
            clearTimeout(timer)
        }

        if (time) {
            timer = setTimeout(() => {
                closeLoading()
                callback && callback()
            }, time)
        }

        let loadingObj = {
            close: closeLoading,
            setMsg: function (msg) {
                loading.querySelector(`span.loading-text`).innerHTML = msg
            }
        }

        return loadingObj
    }

    window.layer.showToast = showToast
    window.layer.showLoading = showLoading
})(window)